<style>
.elx-card-list {
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #e7e7e7;
    box-shadow: 1px 1px 4px #e7e7e7;
    overflow: hidden;
    background: white;
}
.elx-card-list .card-content,.card-image,.card-right{
    float: left;
    position:relative;
}
.elx-card-list .card-image {
    width: 90px;
    height: 90px;
    text-align: center;
}
.elx-card-list .card-content {
    width: calc(100% - 330px);
    height: 90px;
    color: #999999;
    padding: 0px 5px;
}
.elx-card-list .card-right {
    width: 230px;
    height: 90px;
    text-align: right;
}

.elx-card-list .card-image span {
    font-size: 82px;
    line-height: 95px;
    display: inline-block;
    width: 90px;
    height: 90px;
    color: #a0b1c3;
    border-radius: 5px;
}
.elx-card-list .card-title {
    font-size: 16px;
    color: #475669;
    font-weight: 500;
    padding: 0px;
}
.elx-card-list .card-title div {
    padding: 0px;
}
.elx-card-list .el-rate {
    display: inline-block;
    margin-left: 10px;
}
.elx-card-list .el-rate__item {
    vertical-align: baseline;
}
.elx-card-list .el-rate__icon{
  font-size:14px;
}
.elx-card-list .card-desc {
    color: #A2B0C4;
    margin: 4px 0px;
}
.elx-card-list ul.base-data {
    overflow: hidden;
}
.elx-card-list .card-content li {
    margin-right: 20px;
    margin-top: 2px;
    float: left;
}
.elx-card-list .card-label {
    color: #475669;
}
.elx-card-list .card-base-data {
    color: #a2b0c4;
}
.elx-card-list .card-top {
  width: 100%;
    position: absolute;
    top: 0px;
}
.elx-card-list .card-bottom {
  width: 100%;
    position: absolute;
    bottom: 0px;
}
.elx-card-list .card-operate .el-button{
    height:24px;
}
.elx-card-list .card-operate .operate-group span {
    margin: 0 2px;
    width: 25px;
    height: 20px;
    text-align: right;
    line-height: 20px;
    border-radius: 3px;
    color: #a2b0c4;
    font-size: 16px;
    display: inline-block;
    text-decoration: none;
}
.elx-card-list .card-operate .operate-group span a {
    color: #a2b0c4;
}
.elx-card-list .card-operate i:hover {
    color: #475669 !important;
}
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow ,.el-tooltip__popper[x-placement^=top] .popper__arrow,.el-tooltip__popper[x-placement^=top] .popper__arrow::after,.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after{
    border-top-color: #677488;
}
.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow,.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after,.el-tooltip__popper[x-placement^=bottom] .popper__arrow,.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after{
     border-bottom-color:#677488; 
}
.el-tooltip__popper.is-light{
  background-color: #677488;
  border: 1px solid #677488;
}
.el-tooltip__popper {
    line-height: 22px;
    padding: 0px 10px;
    color:white;
}
.el-tooltip__popper[x-placement^="top"] {
    margin-bottom: 3px;
}
.elx-card-list .circle-icon {
    height: 20px;
    line-height: 20px;
    padding: 0px 10px;
    text-align: center;
    border-radius: 18px;
    font-size: 12px;
    color: white;
    margin-left: 8px;
    display: inline-block;
    vertical-align: bottom;
}
.elx-card-list .development {
    background-color: #9faec8;
}
.elx-card-list .release {
    background-color: #4eb0f6;
}
.operate-group button {
    color: #777;
    border: 0!important;
    width: inherit;
}
</style>
<script type="text/x-template" id="elx-table-list-template">
    <div class="elx-card-list" @dblclick="dblclickData">
        <div class="card-image">
            <span class="uex-icon-table"></span>
        </div>
        <div class="card-content">
            <div class="card-title">
                <span>{{item.label?item.label:item.name}}</span>
                <span class="circle-icon release" v-html="stateFormatter(item)"></span>
            </div>
            <div class="card-desc">
                <span v-html="item.descr"></span> 
            </div>
            <ul class="base-data card-bottom">
                <li>
                    <span class="card-label" v-html="'单元类型'"></span>
                    <span class="card-base-data" v-html="unitTypeFormatter(item)"></span>
                </li>
                <li v-for="item in baseData()">
                    <span class="card-label" v-html="item.label"></span>
                    <span class="card-base-data" v-html="item.value"></span>
                </li>
            </ul>
        </div>
        <div class="card-right">
            <div>
                <div class="card-top card-operate">
					<div class="operate-group">
                        <el-tooltip class="item" effect="light" content="编辑" placement="top">
                            <el-button :plain="true" type="success toolbar-btn" @click.native="editData" > <i class="uex-icon-edit"></i> </el-button>
						</el-tooltip>
                        <el-tooltip class="item" effect="light" content="删除" placement="top">
                            <el-button :plain="true" type="danger toolbar-btn" @click.native="deleteData" > <i class="uex-icon-delete"></i> </el-button>
						</el-tooltip>
                        <el-tooltip class="item" effect="light" content="下线" placement="top" v-if="item.state=='1'">
                            <el-button :plain="true" type="danger toolbar-btn" @click.native="offlineData" > <i class="uex-icon-swap-down"></i> </el-button>
                        </el-tooltip>


					</div>
                </div>
                <div class="card-bottom">
                    <span class="card-label">创建者 :</span>
                    <span class="card-base-data " v-html="item.createUser"></span>
                </div>
            </div>    
        </div>
    </div>
</script>
<script>
    var unitTypes= [
        {name: '采集', value: '1'},
        {name: '分发', value: '2'},
        {name: '流控', value: '3'}
    ];
    var  states=[
        {name: '全部', value: ''},
        {name: '开发', value: '0'},
        {name: '生效', value: '1'},
        {name: '失效', value: '2'},
        {name: '待上线', value: '3'},
        {name: '待下线', value: '4'}
    ];

    var unitTypeFormatter=function (val) {
        for(var i in unitTypes){
            if( unitTypes[i].value==val.unitType){
                return unitTypes[i].name;
            }
        }
    };
    var stateFormatter=function (val) {
        for(var i in states){
            if( states[i].value==val.state){
                return states[i].name;
            }
        }
    };
Vue.component('elx-table-list', {
	template:"#elx-table-list-template",
    props: {
        item: {
            type: Object,
            default: {}
        }
    },
    methods: {
        baseData: function(){
            return [
                {label: '批次周期 : ', value: this.item.batchType || '无'},
                {label: '批次偏移量 : ', value: this.item.batchOffset || '无'},
                {label: '批次号 : ', value: this.item.batchNo || '无'},
                {label: '批次步进 : ', value: this.item.batchStep || '无'},
                {label: '发布时间 :', value: this.item.createDate || '无'}
            ];
        },
        unitTypeFormatter:function(val){
            return unitTypeFormatter(val);
        },
        stateFormatter:function(val){
            return  stateFormatter(val);
        },
        editData: function(){
            this.$emit('edit', this.item);
        },
        deleteData: function(){
            this.$emit('delete', this.item);
        },
        dblclickData: function() {
            this.$emit('dblclick', this.item);
        },
        offlineData:function () {
            this.$emit('offline', this.item);
        }
    }
})
</script>